<template>
	<view class="special-wap">
		<view class="special-text">
			专题服务
		</view>
		<u-line color="#E6E6E6" />
		<view class="special_list">
			<view class="special_box" @click="goNext('/pages/HomeLnner/practice/Practice')">
				<image src="../../../static/index/ZYFWZQ.png" lazy-load mode="widthFix"></image>
				<view class="special_title">
					<view class="special_title_top">
						考证专区
					</view>
					<view class="special_title_btm">
						工程 咨询 经济类历年真题
					</view>
				</view>
			</view>
			<view class="special_box" @click="goNext('/components/common/no-message')">
				<image src="../../../static/index/FLFWZQ.png" lazy-load mode="widthFix"></image>
				<view class="special_title">
					<view class="special_title_top">
						法律专区
					</view>
					<view class="special_title_btm">
						提供咨询 代理 援助服务
					</view>
				</view>
			</view>
			<view class="special_box" @click="goNext('/pages/HomeLnner/skill-improvement/skill-improvement')">
				<image src="../../../static/index/KZFWZQ.png" lazy-load mode="widthFix"></image>
				<view class="special_title">
					<view class="special_title_top">
						技能提升
					</view>
					<view class="special_title_btm">
						工程 咨询 经济类历年真题
					</view>
				</view>
			</view>
			<view class="special_box" @click="goNext('/pages/HomeLnner/resume/resume')">
				<image src="../../../static/index/JLZZZQ.png" lazy-load mode="widthFix"></image>
				<view class="special_title">
					<view class="special_title_top">
						简历定制
					</view>
					<view class="special_title_btm">
						精美模板让您脱颖而出
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			special: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods:{
			goNext(url){
				uni.navigateTo({
					url:url
				})
			},
			goService(){
				uni.switchTab({
					url:"/pages/service/service"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.special-wap {
		padding: 40rpx 0rpx;
		background-color: #fff;

		.special-text {
			font-size: 34rpx;
			font-weight: bold;
			color: #000000;
			margin-bottom: 40rpx;
			padding: 0rpx 30rpx;
		}

		.special_list {
			padding: 0rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 40rpx;
			.special_box {
				height: 158rpx;
				position: relative;

				&:nth-child(-n+2) {
					margin-bottom: 20rpx;
				}

				image {
					width: 338rpx;
				}

				.special_title {
					position: absolute;
					top: 40rpx;
					left: 20rpx;

					.special_title_top {
						font-size: 28rpx;
						color: #FFFFFF;
						margin-bottom: 16rpx;
					}

					.special_title_btm {
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}

		}

	}
</style>
